import { inject, observer } from 'mobx-react';
import EHeader from '../../common/EHeader';
import { WeaTab, WeaTable, WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import { renderColumn, reformData} from '../../../../util/centerUtil';
import { toJS } from 'mobx';
import { Spin } from 'antd';
@inject('wfCenterStore')

@observer
class Main extends React.Component{

  constructor() {
    super()
    this.state = {
      currentTab: '',
      type: 'atten', 
      tabs: []
    }
  }
  
  addHoverEvent = () => {
    let that = this;
    this.timerID=setTimeout(()=>{ 
      clearTimeout(that.timerID);
      $(".wf_attention_div_btn").on("mouseover mouseout",function(event){
          const str = $(this).attr('id').substr($(this).attr('id').indexOf('_'))
          if(event.type == "mouseover"){  
           jQuery("#attentionSpan"+str).css("display","block")
          }else if(event.type == "mouseout"){
           jQuery("#attentionSpan"+str).css("display","none")
          }
         })
    },3000)
  }
  delAttentionTag = (requestid, id, rand) => {
    const { delAttentionTag } = this.props.wfCenterStore;
    delAttentionTag({
      src:'del',
      requestids:requestid,
      ids:id,
      rand:rand
    }, this.doRefresh);
    
  }
  componentDidMount() {
    const { getAttentionList } = this.props.wfCenterStore;
    getAttentionList({}, this.changeState);
    // this.addHoverEvent();
    window.delAttentionTag = this.delAttentionTag;
    window.attentionRefresh = this.doRefresh;
  }
  componentWillReceiveProps(nextProps) {
    const { getAttentionList } = this.props.wfCenterStore;
    if(this.props.location.key !== nextProps.location.key) {
      getAttentionList({}, this.changeState);
    }
    this.addHoverEvent();
  }
  componentDidUpdate() {
    const { loadingStatusObj: { attentionHasLoad } } = this.props.wfCenterStore;
    attentionHasLoad && this.addHoverEvent();
  }
  shouldComponentUpdate(nextProps,nextState) {
      return true;
  }
  componentWillUnmount() {
    clearTimeout(this.timerID);
    clearTimeout(this.timer);
  }
  changeState = (obj={}) => {
    let tabs = reformData(obj).tabs;
    this.setState({
      currentTab: obj.tabs && (obj.tabs[0].id || obj.tabs[0].typeid),
      tabs
    });
  }

  tabChange = (v) => {
    const { getTabSwitch, changeLoadStatus } = this.props.wfCenterStore;
    this.setState( {
      currentTab: v
    })
    changeLoadStatus({attentionHasLoad: false});
    getTabSwitch('attention', {attentionType: v});
  }

  moreBtnClick = () => {
    const { currentTab, tabs } = this.state;
    let url = `/spa/workflow/index_mobx.jsp#/main/workflow/attention?jumpTab=${currentTab}&source=wfcenter_todo`;
    window.open(url, '_blank');
  }

  doSave = (data={}) => {
    const { getSetSave, changeLoadStatus, getAttentionList} = this.props.wfCenterStore;
    getSetSave({eleType: 'atten', ...data});
    changeLoadStatus({attentionHasLoad: false});
    this.timer = setTimeout(() => {getAttentionList({}, this.changeState)},500);
    
  }

  doRefresh = () => {
    const { getTabSwitch, changeLoadStatus } = this.props.wfCenterStore;
    changeLoadStatus({attentionHasLoad: false});
    getTabSwitch('attention',{attentionType: this.state.currentTab});
  }

  onSettingBtnClick = () => {
    const { getSettingDialogInfo } = this.props.wfCenterStore;
    getSettingDialogInfo({eleType: 'atten'}); 
  }

  render() {
    const { attentionData={} , settingDataMap, loadingStatusObj: { attentionHasLoad } } = this.props.wfCenterStore;
    const { columnsTitle, dataSource } = reformData(toJS(attentionData));
    let  columns =  renderColumn(toJS(dataSource[0]), columnsTitle, 'attention');
    const { currentTab, type, tabs } = this.state;
    let settingData = [];
    if(settingDataMap.has(type)) {
      settingData = settingDataMap.get(type);
    }
    return(
      <div className='wf-center-ele-item attention-wrap'>
        <div className='attention-element-div'>
          <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@2oozh6`} 
            title={getLabel(389497, '关注流程')} 
            settingData={settingData} 
            type={type}
            dialogHeight={160}
            toolSetting={{more: true,refresh: true, setting: true}}
            moreBtnClick={this.moreBtnClick}
            doRefresh={this.doRefresh}
            doSave={this.doSave}
            onSettingBtnClick={this.onSettingBtnClick}
          />
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@1skf1k`}
            datas={toJS(tabs)}
            keyParam="id" 
            selectedKey={currentTab}
            onChange={this.tabChange}
            style={{fontSize: '12px'}}
          />
          <div className='backlog-ele-content attention-content'>
            <div className="backlog-table">
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@nt353b`} spinning={!attentionHasLoad}>
                  <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@bmlbe7`} 
                    columns={columns} 
                    showHeader={true}
                    pagination={false} 
                    dataSource={dataSource}
                    scroll={{ y: 315 }} 
                  />
              </Spin>
            </div>
          </div>
        </div>
      </div>
    ) 
    
  }
}

export default Main